<template>
  <div>
    <el-table
      :data="search.length==0?value.slice(0,m):value.filter(res=>!search||res._id.includes(search)||res.title.includes(search)||res.detailTitle.includes(search))"
      style="width: 100%, height:auto"
      max-height="500"
      v-el-table-infinite-scroll="load"
    >
      <el-table-column fixed prop="_id" label="id" width="150"></el-table-column>
      <el-table-column prop="title" label="商品" width="120">
        <template slot-scope="scope">
          <img class="coverImg" v-lazy="scope.row.img" alt srcset />
        </template>
      </el-table-column>
      <el-table-column prop="title" label="品牌" width="120"></el-table-column>
      <el-table-column prop="price" label="价格" width="120"></el-table-column>
      <el-table-column prop="sold" label="销量" width="120"></el-table-column>
      <el-table-column prop="detailTitle" label="详情" width="300"></el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot="header" slot-scope>
          <div class="searchBody">
            <input class="search" type="text" v-model="search" name id placeholder="请输入要搜索的内容" />
          </div>
        </template>

        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import shoeList from "../../../models/shoeList";
import shoeAll from "../../../models/shoeAll";
// table 的无限滚动
import elTableInfiniteScroll from "el-table-infinite-scroll";
export default {
  // table 的无限滚动
  directives: {
    "el-table-infinite-scroll": elTableInfiniteScroll
  },
  async mounted() {
    var data;
    if (this.$route.query.key == "all") {
      data = await shoeAll();
    } else {
      data = await shoeList(this.$route.query.key);
    }
    this.value = data.data.res;
  },
  methods: {
    load() {
      this.m += 10;
    },
    handleEdit(index, rows) {
      console.log(index, rows);
      this.$router.push('/edit')
    },
    handleDelete(index, rows) {
      //   rows.splice(index, 1);
      console.log(index, rows);
    }
  },
  watch: {
    search: function() {
      console.log(this.search);
    }
  },
  data() {
    return {
      search: "", //搜索框内容
      m: 10, //无限滚动一次加载的数据条数
      value: [] //所有数据
    };
  }
};
</script>
<style scoped>
.coverImg {
  width: 100px;
}
.searchBody {
  width: 100%;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e9e9e9;
  border-radius: 10px;
}
.search {
  width: 90%;
  border: 0;
}
input::placeholder {
  font-size: 12px;
  font-family: Arial;
  color: #999;
  text-align: center;
  padding: 5px;
}
</style>